<template>
  <div class="zc-table-common">
    <div class="zc-table-search">
      <div class="search-quest">
        <span class="search-quest-title">友情链接名称：</span>
        <div class="search-input">
          <el-input v-model="blogrollName" placeholder="请输入友情链接名称"></el-input>
        </div>
      </div>
      <div class="search-quest">
        <span class="search-quest-title">状态：</span>
        <div class="search-input">
          <el-select v-model="isActivity" placeholder="请选择">
            <el-option label="启用" :value="1"></el-option>
            <el-option label="禁用" :value="0"></el-option>
          </el-select>
        </div>
      </div>
      <div class="search-quest">
        <el-button @click.native="clearSearch">清空条件</el-button>
        <el-button type="primary" icon="el-icon-search" @click.native="searchTable">搜索</el-button>
      </div>
    </div>
    <div class="zc-table-event-btn">
      <el-button type="primary" icon="el-icon-plus" @click.native="eventTab('新增', 'second')">新增</el-button>
    </div>
    <div class="zc-table-body">
      <el-table
        :data="blogrollTable.data"
        :empty-text="emptyText"
        v-loading="tableLoading"
        border
        style="width: 100%">
        <el-table-column
          prop="blogrollName"
          label="友情链接名称">
        </el-table-column>
        <el-table-column
          prop="blogroll"
          label="链接地址">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注">
        </el-table-column>
        <el-table-column
          prop="isActivity"
          label="状态">
          <template slot-scope="scope">
            <span>
              <i class="el-icon-success diy-success" v-if="scope.row.isActivity"></i>
              <i class="el-icon-error diy-error" v-else></i>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click.native="eventTab('编辑', 'second', scope.row)">编辑</el-button>
            <template v-if="!scope.row.isActivity">
              <el-button type="text" size="small" @click.native="deleteBlogroll(scope.row.id)">删除</el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="zc-page-box">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.curPage"
          :total="blogrollTable.total"
          @current-change="changePage"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { GetBlogrollTable, DeleteBlogroll } from '@/api/requestConfig'
  export default {
    name: 'BlogrollTable',
    created() {
      // 获取友情链接表格
      this.getBlogrollTable()
    },
    computed: {
      ...mapGetters([
        'commonTabInfo'
      ])
    },
    watch: {
      'commonTabInfo.text': function(val, oldVal) {
        if (val === 'refresh' && this.commonTabInfo.custom === 'blogroll') {
          this.clearSearch()
        } else if (val === 'update' && this.commonTabInfo.custom === 'blogroll') {
          this.searchTable()
        }
      }
    },
    data() {
      return {
        blogrollName: '', // 友情链接名称称
        isActivity: '',
        emptyText: '未匹配到友情链接数据',
        blogrollTable: {},
        pageInfo: {
          curPage: 1,
          pageSize: 10
        },
        tableLoading: true
      }
    },
    methods: {
      // tabs操作
      eventTab(text, tabsName, custom) {
        this.$store.dispatch('handleTabInfo', {
          text: text,
          tabsName: tabsName,
          custom: custom
        })
      },
      // 清空搜索条件
      clearSearch() {
        this.blogrollName = ''
        this.isActivity = ''
        this.getBlogrollTable()
      },
      // 搜索
      searchTable() {
        this.pageInfo.curPage = 1
        this.getBlogrollTable()
      },
      // 分页
      changePage(nowPage) {
        this.pageInfo.curPage = nowPage
        this.getBlogrollTable()
      },
      // 获取友情链接表格
      getBlogrollTable() {
        this.tableLoading = true
        var needData = {}
        needData.curPage = this.pageInfo.curPage
        needData.pageSize = this.pageInfo.pageSize
        if (this.blogrollName) {
          needData.blogrollName = this.blogrollName
        }
        if (this.isActivity === 0 || this.isActivity === 1) {
          needData.isActivity = this.isActivity
        }
        GetBlogrollTable(needData).then(res => {
          if (res.data) {
            this.blogrollTable = res
          } else {
            this.$message.error(res.message)
          }
          this.tableLoading = false
        })
      },
      // 删除友情链接
      deleteBlogroll(Id) {
        this.$confirm('是否删除此友情链接?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          DeleteBlogroll(Id).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.searchTable()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {})
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/zc-table-common.scss";
</style>
